import React from 'react'
import '../style/test1.css'
// 识别常规变量
const name = 'zhangsan'
// 原生js方法调用
const getAge = () => {
  return 18
}
// jsx中不能写语句，只能写表达式

// 列表渲染：技术方案 ---> map
// 列表渲染时同样需要 key
const songs = [
  {id: 1, name: '最伟大的作品'},
  {id: 2, name: '夜曲'},
  {id: 3, name: '青花瓷'},
]

// 条件渲染：技术方案 ---> 三元表达式    、逻辑&&运算
let flag = true

// 复杂的多分支的逻辑， 通过写一个函数来做分支逻辑，模板负责调用，原则：模板中的逻辑尽量保持精简
function getHtag(type) {
  switch(type) {
    case 1:
      return <h1>this is h1</h1>
    case 2:
      return <h2>this is h2</h2>
    case 3:
      return <h3>this is h3</h3>
    default:
      return null
  }
}

// 样式控制
// 行内样式 ---> 在元素上绑定一个style属性 双层 {{}}， 里面一层写样式， 原生当中有连接符的需要写成驼峰， 或者提取为变量
const style = {color: 'red', fontSize: '22px'}
// 类名样式  ---> 在元素上绑定一个className属性(类名)
// 需要顶部引入  import '../style/test1.css'
// 动态控制样式

export default function Test1_jsx() {
  return (
    <>
      <div>
        姓名：{name}
        年龄：{getAge()}
      </div>
      <div>
        <ul>
          {
            songs.map(song=><li key={song.id}>{song.name}</li>)
          }
        </ul>
      </div>
      <div>
        {flag ? <p>小新是一个傻子</p> : null}
        {/* 复杂模板可以加 () 换行 */}
        {flag ? (
          <div>
            <sapn>小新是一个傻子</sapn>
          </div>) : null}
          {flag && <span>另一个傻子</span>}
      </div>
      <div>
        {getHtag(1)}
        {getHtag(2)}
        {getHtag(3)}
      </div>
      <div>
        <span style={{color: 'red', fontSize: '22px'}}>style样式</span>
        <span style={style}>style样式</span>
        <span className='active'>类名样式</span>
        <span className={flag?'active':''}>动态类名样式</span>
      </div>
    </>
  )
}
